import cssText from './index.jcss'
import themeTemplate from './template.jcss'
import Utils from '../../utils'
import Plugin from '../plugin'
import {EN,CN,Web,Cst} from '../../config'

export default class Theme extends Plugin{
	constructor($env,$event){
		super()
		this.name="theme"
		this.$env = $env
		this.$event = $event

		this.cfg = {width:150,height:150}
		this.createClassName({
			root:"theme",
			blink:"blink"
		})
		this.injectStyle(cssText,this.cn.assign({r:this.cfg.width}),"theme")
		this.createLayer(this.cn.root)
		
		this.cs = "#04B08C,#9BAEF3,#4D88D8,#8264B8,#D86161,#EF889A,#F7A693,#EF702F,#B5B4B9".split(/,/)
		// this.cs = ["#EB645E", "#F6B848", "#FEE548", "#85F379", "#49A2FB", "#D47AFE", "#B5B4B9"]
		// this.cs =  ["#FF0000", "#FF6500", "#FFFF00", "#008000", "#008080", "#0000FF", "#800080"]
		this.fcs = ["#DEDEDE","#FFFFFF","#232324","#FFFFEE"]
		this.theme={
			//k:fill,v:stroke
			"#232324":{
				f:"#FFFFFF",
				bg:Web.theme,
				fbg:"#232324"
			},
			"#FFFFEE":{
				f:"#FFFFFF",
				bg:Web.theme,
				fbg:"#FFFFEE"
			},
			"#FFFFFF":{
				f:"#FFFFFF",
				bg:Web.theme,
				fbg:"#FFFFFF"
			},
			"#DEDEDE":{
				f:"#FFFFFF",
				bg:Web.theme,
				fbg:"transparent"
			},
			"other":{
				f:"#FFFFFF",
				bg:""
			}
		}
		this.cc = this.fcs[2]
		this.changeTheme(this.theme[this.cc])

		this.render().draw()
		this.bind()
	}
	changeTheme(c){
		let tcssText = this.injectThemeStyle(c)
		if(this.themeStyle)
			this.themeStyle.innerHTML = tcssText
		else 
			this.themeStyle = document.appendStyle(tcssText)

		let theme = this.$env.get(Cst.themeClass)
		document.documentElement.classList.remove(theme)

		theme = this.cn.root+c.bg.replace("#","")
		this.$env.set(Cst.themeClass,theme)
		this.$env.set(Cst.theme,c)
		this.$event.emit(EN.theme,c)
		document.documentElement.classList.add(theme)
	}
	injectThemeStyle(c){
		let theme = c.bg.replace("#","")
		return Utils.parseCssText(themeTemplate,this.cn.assign({v:theme,...c}))
	}
	bind(){
		this.ctx.canvas.addEventListener("click",(e)=>{
			let pos = e.epos()
			let cs = this.pick(pos)
			let c16 = cs.c16
			let c1 = !this.cs.includes(c16)
			let c2 = !this.fcs.includes(c16)
			if(c1&&c2)return
			let theme = this.theme[c16]
			if(!theme){
				theme = this.theme.other.assign()
				theme.bg = c16
			}
			this.cc = c16
			this.draw()
			this.changeTheme(theme)
		})
	}
	render(){
		let {width,height} = this.cfg
		let cvs = document.createDOM("canvas",{width,height})
		this.$layer.appendChild(cvs)
		this.ctx = cvs.getContext("2d")

		setTimeout(()=>{
			this.emit(EN.layout_render,this.$layer)
		})
		return this
	}
	draw(){
		let cs = this.cs
		let fcs = this.fcs
		let ctx = this.ctx
		let {width,height} = this.ctx.canvas
		let angle = 2*Math.PI/cs.length

		ctx.clearRect(0,0,width,height)

		ctx.save()
		ctx.lineWidth=2
		ctx.imageSmoothingEnabled = true
		ctx.translate(width/2,height/2)
		cs.forEach((c,i)=>{
			let r = this.cc===c?(width/2-6):(width/2-0.5)
			this.drawPart(c,r,angle)
			ctx.rotate(angle)
		})
		angle = 2*Math.PI/fcs.length
		fcs.forEach((c,i)=>{
			let r = this.cc===c?(width/5+6):width/5
			this.drawPart(c,r,angle)
			ctx.rotate(angle)
		})
		ctx.restore()
	}
	drawPart(c,r,angle){
		let ctx = this.ctx
		ctx.save()

		ctx.fillStyle = c
		ctx.beginPath()
		ctx.moveTo(0,0)
		ctx.arc(0,0,r,0,angle)
		ctx.closePath()
		ctx.fill()

		ctx.strokeStyle = c
		ctx.beginPath()
		ctx.arc(0,0,r,0,angle)
		ctx.stroke()

		ctx.restore()
	}
	pick(pos){
		let {x,y} = pos
		let pixes = this.ctx.getImageData(x,y,1,1).data;
		let r = Number(pixes[0]);
		let g = Number(pixes[1]);
		let b = Number(pixes[2]);
		let a = Number(pixes[3]);
		let r16 = r.toString(16);
			r16=r16.length===1?"0"+r16:r16;
		let g16 = g.toString(16);
			g16=g16.length===1?"0"+g16:g16
		let b16 = b.toString(16);
			b16=b16.length===1?"0"+b16:b16
		let a16 = a.toString(16);
			a16=a16.length===1?"0"+a16:a16
		let rgb = `rgb(${r},${g},${b})`;
		let rgba = `rgba(${r},${g},${b},${a})`;
		let c16 = `#${r16}${g16}${b16}`.toUpperCase()
		let ca16 = `#${r16}${g16}${b16}${a16}`.toUpperCase()
		return {
			rgb,
			rgba,
			c16,
			ca16,
			raw:[r,g,b,a]
		}
	}
}